<template>
    <div class="ranking_body">
        <div class="nav">
            <div class="left">
                <div>{{ props.ranking }}</div>
                <div>{{ props.rankingName }}</div>
            </div>
            <div class="right">
                <div>
                    <el-image src="https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/more_1.png" />
                </div>
            </div>
        </div>
        <div class="main">
            <div v-for="(item, index) in props.rankingInfo">
                <div>
                    <el-image :src="rankImgs[`${index + 1}`]" />
                </div>
                <div>
                    <el-image :src="item.image" />
                </div>
                <div>
                    {{ item.text }}
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
const rankImgs = {
    "1": "https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/label1.png",
    "2": "https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/label2.png",
    "3": "https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/label3.png"
}
const props = defineProps({
    "ranking": String,
    "rankingName": String,
    "rankingInfo": Array,
    "rankImgs": Object
})

</script>

<style scoped lang="scss">
.ranking_body {
    width: 414px;
    height: 400px;
    box-sizing: border-box;
    border: 1px solid #DFDFDF;
    display: flex;
    flex-direction: column;

    & .nav {
        background-color: #329DAC;
        display: flex;
        justify-content: space-between;
        padding: 23px 30px;

        & .left {
            color: #fff;

            &>:nth-child(2) {
                font-weight: bold;
                font-size: 20px;
                margin-top: 4px;
            }
        }

        & .right {
            &>div {
                background-color: #fff;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                & .el-image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    & .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        &>div {
            display: flex;
            padding: 0px 30px;
            align-items: center;

            &>:nth-child(2) {
                margin-left: 20px;
                margin-right: 20px;
            }
        }
    }
}
</style>